<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义数据标签</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size:10px;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: #f5f5f5;
        }

        .container {
            display: flex;
            width: 99%;
            max-width: 100%;
        }

        .left, .right {
            background-color: #fff;
            padding:0 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .left{
            flex-grow: 7;
        }
        .right {
            flex-grow: 3;
        }

        h5 {
            margin-bottom: 10px;
        }

        input[type="text"], textarea {
            width: 90%;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        /* 表格样式 */
        table {
            table-layout: fixed;/* 设置表格的布局为固定布局 */
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
            white-space: nowrap; /* 强制单元格内文字不换行 */
            overflow: hidden; /* 隐藏超出单元格的文字 */
            text-overflow: ellipsis; /* 显示省略号 */
        }

        th {
            position: sticky;
            top: 0;
            background-color: #f2f2f2;
            z-index: 1;
        }

        /* 容器样式 */
        .tbcontainer {
            height: 300px;
            overflow: auto;
            border: solid 1px #ccc;
            scrollbar-width: thin;
            scrollbar-color: #888 #f2f2f2;
        }

        /* 滚动条样式 */
        .tbcontainer::-webkit-scrollbar {
            width: 8px;
        }

        .tbcontainer::-webkit-scrollbar-track {
            background: #f2f2f2;
        }

        .tbcontainer::-webkit-scrollbar-thumb {
            background-color: #888;
            border-radius: 4px;
        }

        .tbcontainer::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }
        .delete-button {
            padding: 3px 3px;
            border: none;
            border-radius: 3px;
            background-color: #f44336;
            color: white;
            font-size: 10px;
            cursor: pointer;
        }
        .delete-button:hover {
            background-color: #d32f2f;
        }

        .normal-button {
            padding: 3px 3px;
            border: none;
            border-radius: 3px;
            background-color: #4E7EFF;
            color: white;
            font-size: 10px;
            cursor: pointer;
        }
        .normal-button:hover {
            background-color: #4E6EF2;
        }

        .locate-button {
            padding: 3px 3px;
            border: none;
            border-radius: 3px;
            background-color: #0abb87;
            color: white;
            font-size: 10px;
            cursor: pointer;
        }
        .locate-button:hover {
            background-color: #0a9966;
        }

        /* 定义信息提示条的样式 */
        .alert-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
        }

        .alert-bar {
            padding: 10px;
            border-bottom: solid 1px #f8a2a6;
            background-color: #f8d7da;
            color: #721c24;
            font-weight: bold;
            text-align: center;
            margin-bottom: 1px;
            opacity: 1;
            transition: all 0.5s ease;
        }

        .alert-bar.hide {
            opacity: 0;
            transform: translateY(-50px);
        }
    </style>
</head>
<body>
<!-- 定义信息提示条的HTML结构 -->
<div id="alert-container" class="alert-container"></div>

<div class="container">
    <div class="left">
        <h5>待添加标签：</h5>
        <input type="text" id="inputKey" oninput="loadData();" placeholder="请输入数据标签关键字搜索" />
        <div class="tbcontainer">
            <table id="tagTable">
                <thead>
                <tr>
                    <th>数据标签</th>
                    <th style="width: 110px;">操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 大量的数据行 -->
                <!--<tr>-->
                <!--<td>AAA</td>-->
                <!--<td>BBB</td>-->
                <!--<td><button class="normal-button">添加</button></td>-->
                <!--</tr>-->

                </tbody>
            </table>
        </div>
    </div>

</div>

<script>

    let definedDataTagJson = window.external.UserParams;

    var isFromStart = false;
    var lastOpTag = '';

    //加载数据
    function loadData() {
        var kWord = document.getElementById("inputKey").value;
        searchDataTag(definedDataTagJson, kWord);
        return;
    }

    //加载上方数据列表
    function searchDataTag(dtDefinedJson, s){
        var tb1 = document.getElementById("tagTable");
        var rCount = tb1.rows.length;
        for (var i = 1; i < rCount; i++) {
            tb1.deleteRow(1);
        }

        if('' == dtDefinedJson) dtDefinedJson = '[]';
        let definedDataTagObj = JSON.parse(dtDefinedJson);

        var oTable = document.getElementById("tagTable");
        var tbodyObj = oTable.tBodies[0];
        for(let key in definedDataTagObj ){
            let dtName = definedDataTagObj[key].name;
            if (dtName.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1) {
                var oTr = tbodyObj.insertRow();
                var oTd = oTr.insertCell();
                oTd.innerHTML = dtName;
                oTd.title = dtName;
                oTd = oTr.insertCell();
                oTd.innerHTML = '<button class="delete-button" onclick="deleteTag(\''+ dtName +'\')">删除</button> <button class="locate-button" onclick="locateTag(\''+ dtName +'\')" >定位</button> <button class="normal-button" onclick="addTag(\''+ dtName +'\');">添加</button> ';
            }
        }
    }

    function addTag(tagName) {
        pageofficectrl.word.SetTextToSelection(tagName);
    }

    function locateTag(tagName){
        pageofficectrl.word.SelectionCollapse(0);

        if(isFromStart){
            if(lastOpTag == tagName){
                pageofficectrl.word.HomeKey(6);
            }

            isFromStart = false;
        }

        if(!pageofficectrl.word.FindNextText(tagName)){
            showAlert('已经搜索到文档末尾。');
            isFromStart = true;
        }

        lastOpTag = tagName;
    }

    function deleteTag(tagName){
        let selectText = pageofficectrl.word.GetTextFromSelection();
        if(tagName != selectText){
            showAlert('请先执行‘'+tagName+'’的定位操作，然后再删除。');
        }else{
            pageofficectrl.word.SetTextToSelection('');
        }
    }

    // 自定义alert提示条
    function showAlert(message) {
        var alertBar = document.createElement('div');
        alertBar.className = 'alert-bar';
        alertBar.textContent = message;

        var alertContainer = document.getElementById('alert-container');
        alertContainer.insertBefore(alertBar, alertContainer.firstChild);
        alertBar.style.animation = 'slideDown 0.5s ease-out';

        setTimeout(function() {
            alertBar.classList.add('hide');
            setTimeout(function() {
                alertContainer.removeChild(alertBar);
            }, 500);
        }, 2000);
    }


    loadData();

</script>
</body>
</html>